<template>
  <div class="viewContain">
    <!-- 海报 -->
    <div class="advertisement">
      <!-- <img src="../../assets/homeAdvertisement.png" alt=""> -->
      <div class="swipe-list">
        <van-swipe :autoplay="3000" lazy-render indicator-color="white" class="my-swipe">
          <div v-for="(item, index) in carouselList" :key="index">
            <van-swipe-item>
              <img class="carousel-img" :src="item.picUrl" alt="" @click="toCarouseDetailPage(item)">
            </van-swipe-item>
          </div>
        </van-swipe>
      </div>
    </div>
    <div class="main-container">
      <div class="operation-list">
        <div class="list-content">
          <div class="operation-list-box" @click="ringUp">
            <img src="https://ilonggang.lggov.cn/zhzp/person/images/home/policy.png" alt="">
            <div class="list-title">政策法规</div>
          </div>
          <div class="operation-list-box" @click="test">
            <img src="https://ilonggang.lggov.cn/zhzp/person/images/home/best-employee.png" alt="">
            <div class="list-title">最美就业人</div>
          </div>
          <div class="operation-list-box" @click="test">
            <img src="https://ilonggang.lggov.cn/zhzp/person/images/home/hot-activity.png" alt="">
            <div class="list-title">事业单位招聘</div>
          </div>
          <div class="operation-list-box" @click="test">
            <img src="https://ilonggang.lggov.cn/zhzp/person/images/home/live-recruit.png" alt="">
            <div class="list-title">直播招聘</div>
          </div>
        </div>
        <div class="job-fairs-box">
          <img src="https://ilonggang.lggov.cn/zhzp/person/images/home/job-fairs.png" alt="" @click="toJobFairsPage">
        </div>
      </div>
    </div>
    <!-- 分隔线 -->
    <van-divider class="home-title">
      <van-icon name="location" color="#16b887" />
      <span style="margin-left: 5px">附近职位</span>
    </van-divider>
    <!-- 提示报名 -->
    <van-popup v-model="isShowDialog" round>
      <div class="content">
        <div><h3>提示</h3></div>
        <div class="alertTitle">亲,请完善简历！</div>
        <div class="operateButton">
          <div class="left" @click="cancelShowTip">取消</div>
          <div class="right" @click="cancelShowTip">确定</div>
        </div>
      </div>
    </van-popup>
    <TabBar :msg-num="msgNum" />
  </div>
</template>

<script>
import TabBar from '@/components/TabBar'

export default {
  name: 'Home',
  components: {
    TabBar
  },
  data () {
    return {
      carouselList: [
        { picUrl: 'https://ilonggang.lggov.cn/zhzp/person/images/home/job-fairs.png' },
        { picUrl: 'https://ilonggang.lggov.cn/zhzp/person/images/home/job-fairs.png' },
        { picUrl: 'https://ilonggang.lggov.cn/zhzp/person/images/home/job-fairs.png' }
      ],
      jobList: [],
      loading: false, // 加载中
      finished: false, // 加载完成
      listQuery: {
        area: 0,
        longitude: '',
        latitude: '',
        page: 1,
        size: 10,
        distance: 3 // 方圆3公里
      },
      dataTotal: 0,
      isShowDialog: false,
      msgNum: 1, // 当前未读消息数
      isTip: false
    }
  },
  methods: {
    // 打电话
    ringUp () {
      // <a href="tel: 13653083413">点击可拨打电话</a>
      // <a href="sms:11111111111?body=sms">点击可发送短信</a>
      // <a href="mailto:123456@123456.com?subject=testing&body=email">点击可发送邮件</a>
      window.location.href = 'tel: 13653083413'
    },
    // 轮播图跳转详情
    toCarouseDetailPage (item) {
      // 页面跳转类型 0不跳转 1 最美就业人详情 2 政策法规详情 3 事业单位招聘详情 4招聘会详情
      if (item.type === '1') { // 1 最美就业人详情
        this.$router.push({
          query: {
            id: item.associateId
          },
          path: '/bestEmployee/detail'
        })
      } else if (item.type === '2') { // 2政策法规详情
        this.$router.push({
          query: {
            id: item.associateId
          },
          path: '/policy/detail'
        })
      } else if (item.type === '3') { // 3事业单位招聘详情
        this.$router.push({
          query: {
            id: item.associateId
          },
          path: '/institutionRecruit/detail'
        })
      } else if (item.type === '4') { // 4招聘会详情
        this.$router.push({
          query: {
            id: item.associateId
          },
          path: '/jobFairs/jobFairsDetail'
        })
      }
    },
    test () {
      this.$toast('开发中，敬请期待...')
      // window.open('https://app.yunxin.163.com/webdemo/groupCall/index.html#/')
    },
    // 前往事业单位招聘页面
    toInstitutionRecruitPage () {
      this.$router.push('/institutionRecruit')
    },
    // 前往政策法规页面
    toPolicyPage () {
      this.$router.push('/policy')
    },
    // 前往最美就业人页面
    toEmployeePage () {
      this.$router.push('/bestEmployee')
    },
    // cancel
    cancelShowTip () {
      this.isShowDialog = false
      sessionStorage.setItem('isTip', true)
    },
    toJobFairsPage () {
      console.log('前往招聘会详情')
      this.$router.push('/jobFairs')
    },
    // 职位详情
    handleToDeatail (id, entId) {
      console.log(id)
      this.$router.push({ path: '/job/jobDetail', query: { id, entId } })
    },
    // 去简历页面
    gotoResunme () {
      sessionStorage.setItem('isTip', true)
      this.$router.push({
        path: '/myResume/myResumeDetail',
        query: { type: 2, isEdit: true }
      })
    },
    onLoad () {
      console.log('触底了~', 'this.loading===,', this.loading)
      // this.getJobIntroduceList()
      if (sessionStorage.getItem('accessToken')) {
        this.getJobIntroduceList()
      }
    }
    // tabBar 获取当前未读消息数量
    // getMsgNum () {
    //   invitedNoticeNoReadNum({
    //     id: sessionStorage.getItem('userId'),
    //     sendType: 2
    //   }).then(res => {
    //     console.log('getMsgNum:', res.data.data)
    //     if (res.data.data && res.data.data != 0) {
    //       this.msgNum = parseInt(res.data.data)
    //     } else {
    //       this.msgNum = null
    //     }
    //   })
    // },
  }
}
</script>
<style lang="less" scoped>
.viewContain {
  box-sizing: border-box;
  padding: 0 0 calc(62px + env(safe-area-inset-bottom));
  min-height: 100vh;
  background-color: #f8f8f8;

  .test {
    margin-bottom: 20px;
  }

  .main-container {
    height: 250px;
    width: 100%;
    position: relative;
    top: -10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #f8f8f8;
    .operation-list {
      padding: 12px;
      .list-content {
        width: 100%;
        display: flex;
        .operation-list-box {
          flex: 22%;
          height: 80px;
          margin: 5px 0;
          text-align:center;
          font-size: 14px;
          img{
            padding-top: 10px;
            margin: 0 auto;
            // height: 100%;
            height: 30px;
          }
          .list-title{
            margin-top: 5px;
          }
        }
      }
      .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        text-align: center;
        border-radius: 5px;
        background-color: #39a9ed;
      }
      .job-fairs-box{
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .advertisement {
    img {
      height: 170px; // 170px
      width: 100%;
    }
  }
  .home-title {
    padding: 0 20px;
    font-size: 16px;
    color: #000;
    border-color: #ccc;
  }
  .jobList {
    background: #f8f8f8;
    padding: 0 12px;
    .jobItem {
      background: #fff;
      box-sizing: border-box;
      padding: 12px;
      border-radius: 6px;
      margin-bottom: 12px;
      .top {
        display: flex;

        .jobName {
          flex: 1;
          min-width: 0;
          font-size: 18px;
          white-space: nowrap;
          -ms-text-overflow: ellipsis;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .jobSalary {
          margin-left: 10px;
          // color: $moneyColor;
          color: #fe742e;
          font-size: 18px;
        }
      }
      .jobAttribute {
        padding: 10px 0;
        font-size: 14px;
        color: #666;
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #333;
      }
      .companyName {
        flex: 1;
        min-width: 0;
        margin-right: 10px;
        white-space: nowrap;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #16b887;
      }
    }
  }

  .content {
    width: 300px;
    height: 150px;
    padding: 20px 0;
    background-color: #fff;
    h3 {
      text-align: center;
    }
    .alertTitle {
      text-align: center;
      padding-top: 40px;
    }
    .operateButton {
      border-top: 1px solid #ccc;
      display: flex;
      justify-content: space-around;
      .left,
      .right {
        width: 49%;
        height: 100%;
        // border-top: 1px solid #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .right {
        border-left: 1px solid #ccc;
        color: #16b887;
      }
    }
  }
  .operateButton {
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .collectAndShare {
      height: 100%;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      display: flex;
      justify-content: space-around;
      // .collect {
      //   // display: flex;
      //   // justify-content: center;
      //   // align-items: center;
      // }
      // .share {
      //   // display: flex;
      //   // justify-content: center;
      //   // align-items: center;
      // }
    }
    .phoneNumber {
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      height: 100%;
      flex: 1;
      // border: 1px solid #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ff9d3b;
    }
    .sendResume {
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      height: 100%;
      flex: 1;
      // border: 1px solid #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #3584fb;
    }
  }
}
</style>
